/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable react-hooks/rules-of-hooks */
/** 咨询师表格 */
import React, { useState, useEffect } from 'react';
import {
  Space,
  Row,
  Col,
  Card,
  Image,
  Typography,
  Pagination,
  Divider,
  Tag,
  List,
  Table,
  Button,
  Rate,
  Input,
  Modal,
} from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { Line } from '@ant-design/charts';
import { request } from 'umi';
import { values } from 'lodash';
import { currentUser } from '@/services/ant-design-pro/api';

const { Title } = Typography;
const { Search } = Input;

const index: React.FC = () => {
  const [data, setData] = useState([]);

  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isModalVisible2, setIsModalVisible2] = useState(false);
  const [record, setRecord] = useState({});

  const [name, setName] = useState('');
  const [workuint, setworkuint] = useState('');
  const [rank, setrank] = useState(0);
  const [time, setTime] = useState('');

  const [_id, set_id] = useState(100);
  const [_name, set_name] = useState('');
  const [_workuint, set_workuint] = useState('');

  const showModal = (record) => {
    setIsModalVisible(true);
    setRecord(record);
  };

  const handleOk = () => {
    handleUpdate(record);
    setIsModalVisible(false);
  };

  const handleOk2 = () => {
    handleAdd();
    setIsModalVisible2(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const handleGetData = async () => {
    const res = await request('http://localhost:8080/consultant/getAll');
    setData(res.payload);
  };

  useEffect(() => {
    handleGetData();
  }, []);

  const handleUpdate = async (val) => {
    val.name = name;
    val.evaluation_grade = rank;
    val.workuint = workuint;
    val.today_consult_time = time;
    await request('http://localhost:8080/consultant/update/' + val.consultant_id, {
      method: 'put',
      data: val,
    }).catch((error) => {
      console.log(error);
    });
    handleGetData();
  };

  const handleSearch = async (val) => {
    console.log(val)
    await request('http://localhost:8080/consultant/getByName/' + val)
      .then(function (res) {
        setData([res.payload]);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  const handleDelete = async (val) => {
    console.log(val)
    await request('http://localhost:8080/consultant/deleteByID/' + val.consultant_id).catch(
      (error) => {
        console.log(error);
      },
    );
    handleGetData();
  };

  const handleAdd = async (val) => {
    const t = data[0]
    t.consultant_id = _id
    t.name = _name
    t.workuint = _workuint
    t.evaluation_grade = 0 
    t.today_consult_time = '00:00:00'
    await request('http://localhost:8080/consultant/add', {
      method: 'put',
      data: t,
    }).catch((error) => {
      console.log(error);
    });
    handleGetData();
  };

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '今日咨询时长',
      dataIndex: 'today_consult_time',
      key: 'today_consult_time',
    },
    {
      title: '工作单位',
      dataIndex: 'workuint',
      key: 'workuint',
    },
    {
      title: '评分',
      dataIndex: 'evaluation_grade',
      key: 'evaluation_grade',
      render: (text) => <a>{text}</a>,
    },
    {
      title: 'Action',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <Button type="primary" onClick={() => showModal(record)}>
            修改信息
          </Button>
          <Button type="primary" onClick={() => handleDelete(record)}>
            删除信息
          </Button>
        </Space>
      ),
    },
  ];

  const columns3 = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: 'Tags',
      key: 'tags',
      dataIndex: 'tags',
      render: (tags) => (
        <>
          {tags.map((tag) => {
            let color = tag.length > 5 ? 'geekblue' : 'green';
            if (tag === 'loser') {
              color = 'volcano';
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: 'Action',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <a>Invite {record.name}</a>
          <a>Delete</a>
        </Space>
      ),
    },
  ];

  const data3 = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ];

  const onSearch = (value) => {
    console.log(value);
  };

  return (
    <PageContainer>
      <Modal
        title="新增"
        visible={isModalVisible2}
        onOk={() => {
          handleOk2();
        }}
        onCancel={()=>setIsModalVisible2(false)}
      >
        <Space>
          <Input
            onChange={(e) => {
              const value = e.target.value;
              set_id(value);
            }}
            placeholder="id"
          />
          <Input
            onChange={(e) => {
              const value = e.target.value;
              set_name(value)
            }}
            placeholder="姓名"
          />
          <Input
            onChange={(e) => {
              const value = e.target.value;
              set_workuint(value);
            }}
            placeholder="工作单位"
          />
        </Space>
      </Modal>
      <Modal
        title="修改"
        visible={isModalVisible}
        onOk={() => {
          handleOk();
        }}
        onCancel={handleCancel}
      >
        <Space>
          <Input
            onChange={(e) => {
              const value = e.target.value;
              setName(value);
            }}
            placeholder="姓名"
          />
          <Input
            onChange={(e) => {
              const value = e.target.value;
              setTime(value);
            }}
            placeholder="时长"
          />
          <Input
            onChange={(e) => {
              const value = e.target.value;
              setworkuint(value);
            }}
            placeholder="工作单位"
          />
          <Input
            onChange={(e) => {
              const value = e.target.value;
              setrank(parseInt(value));
            }}
            placeholder="排名"
          />
        </Space>
      </Modal>
      <Space style={{ marginBottom: 16 }}>
        <Search
          placeholder="input search text"
          allowClear
          enterButton="搜索"
          onSearch={(val, event) => handleSearch(val)}
        />
        <Button onClick={() => handleGetData()}>重置</Button>
        <Button onClick={() => setIsModalVisible2(true)}>新增</Button>
      </Space>
      <Table columns={columns} dataSource={data} />
    </PageContainer>
  );
};

export default index;
